<template>
    <p1>name:{{ person.name }}</p1>
    <br>
    <p1>age:{{ person.age }}</p1>
    <br>
    持有车辆：
    <p1 v-for="car in person.cars">{{ car.c1 }} &nbsp;</p1>
    <br>
    <button @click="changeName">修改名字</button>
    <br>
    <button @click="changeAge">修改年龄</button>
    <br>
    <button @click="changeCar1">换新车1</button>
    <br>
    <button @click="changeCar">换新车</button>
    <br>
    <button @click="changePerson">换新人</button>
</template>

<script lang="ts">
export default {
    name: 'Hello'
}
</script>

<!--setup语法糖-->
<script setup lang="ts">
import { ref, reactive,toRefs, toRef,computed,watch,watchEffect } from 'vue'

let person = reactive({ name: 'zs', age: 18, cars: [{ c1: '奔驰' }, {c1:'宝马'}] })


function changeName() { 
    person.name += '~'
}
function changeAge() { 
    person.age +=1
}
function changeCar1() { 
    person.cars[0] = {c1:'保时捷'}
}
function changeCar() { 
    //person.cars = [{c1:'别克'}, {c1:'小米'}]
    Object.assign(person.cars,[{c1:'别克'}, {c1:'小米'}])
}

function changePerson() { 
    /* reactive对象只能用assign换，地址并没有交换 */
    Object.assign(person,{name:'ls',age:20})
}
/*
    监视的对象是地址值 
    第一个参数是 被监视的数据
    第二个参数是 监视回调
    第三个参数是 配置对象(deep、immediate、等...)
 */

//智能监视
watchEffect(() => { 
    if (person.age >= 25) { 
        console.log('发送');
    }
})

</script>